<template style="text-align: left">
  <div class="materialIndex" style="margin-top: 20px;margin-left: 75px;">
    <el-main style="color: grey;font-family: Helvetica,serif;font-size: smaller;padding-top: 5px" id="materialMain">
      <div id="classifyOne" style="width: 1280px;height: auto">
        <div>
          <ul>
            <li><strong>一级场景:</strong></li>
            <li>
              <el-link :underline="false" id="firstAll" :class="{allShowLink:firstAllShowFlag}" @click="firstAllClick">
                全部
              </el-link>
            </li>
            <li v-for="first in firstClassify">
              <el-link :underline="false" @click="queryListClassify(first)" :class="{showLink:first.firstClassifyFlag}">
                {{ first.name }}
              </el-link>
            </li>
          </ul>
        </div>
        <div>
          <ul>
            <li><strong>二级场景:</strong></li>
            <li>
              <el-link :underline="false" id="lastAll" :class="{allShowLink:lastAllShowFlag}" @click="lastAllClick">全部
              </el-link>
            </li>

            <li v-for="last in lastClassify">
              <el-link :underline="false" @click="lastClassifyClick(last)" :class="{showLink:last.lastClassifyFlag}">
                {{ last.name }}
              </el-link>
            </li>
            <br/>
          </ul>
        </div>
        <div>
          <ul>
            <li><strong>风格特征:</strong></li>
            <li>
              <el-link :underline="false" id="styleAll" :class="{allShowLink:styleAllShowFlag}" @click="styleAllClick">
                全部
              </el-link>
            </li>
            <li v-for="style in styleList">
              <el-link :underline="false" @click="styleInfoClick(style)" :class="{showLink:style.styleFlag}">
                {{ style.label }}
              </el-link>
            </li>
          </ul>
        </div>
      </div>
      <br/>
      <el-divider></el-divider>
      <br/>
      <div style="margin-top: 20px;" id="menuCenter">
        <div id="classifyTwo" v-if="flag===false">
          <el-row :gutter="20">
            <el-col :span="4" :offset="3">
              <div style="margin-top: 3px;" class="linkMenu">
                <el-link :underline="false" @click="nearestTime" :class="{linkMenu:linkMenuOneFlag}">最新</el-link>
                <span style="margin-left: 8px;margin-right: 8px;color: lightgrey">|</span>
                <el-link :underline="false" @click="winnowClick" :class="{linkMenu:linkMenuTwoFlag}">精选</el-link>
              </div>
            </el-col>
            <el-col :span="2" style="margin-left: 200px">
              <div id="btn">
                <el-radio-group v-model="temp" size="mini" @change="changeTemp">
                  <el-radio-button label="left"
                                   class="radioBtn"
                  >
                    <span class="iconfont icon-menu1"
                          style="position: relative;left: -12px;top: 1px"
                    />
                  </el-radio-button>
                  <el-radio-button label="right"
                                   class="radioBtn"
                  >
                    <span class="iconfont icon-menu-01"
                          style="position: relative;left: -10px;top: 1px"
                    />
                  </el-radio-button>
                </el-radio-group>
              </div>
            </el-col>
            <el-col :span="3">
              <div class="condition">
                <el-select size="mini" v-model="makeTypeNumber" placeholder="制作形式" @change="makeChange">
                  <el-option
                    v-for="makeType in makeTypeList"
                    :key="makeType.id"
                    :label="makeType.name"
                    :value="makeType.id"
                    style="text-align: center"
                  >
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="3">
              <div class="condition">
                <el-select size="mini" v-model="auditNumber" placeholder="审核评级" @change="auditChange">
                  <el-option
                    v-for="audit in auditList"
                    :key="audit.zpsh"
                    :label="audit.zpshName"
                    :value="audit.zpsh"
                    style="text-align: center"
                  >
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="3">
              <div class="condition">
                <el-select size="mini" v-model="clientNumber" placeholder="客户评价" @change="clientChange">
                  <el-option
                    v-for="client in clientList"
                    :key="client.id"
                    :label="client.name"
                    :value="client.id"
                    style="text-align: center"
                  >
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="4">
              <el-button class="iconfont icon-guolv" @click="advancedFlag=true" style="margin-right: 10px">高级筛选
              </el-button>
              <el-dialog title="高级筛选" :visible.sync="advancedFlag" style="padding: 30px">
                <el-select v-model="aboutCompanyId" placeholder="所属公司">
                  <el-option
                    v-for="company in companyList"
                    :key="company.companyId"
                    :label="company.companyName"
                    :value="company.companyId"
                    style="text-align: center"
                  >
                  </el-option>
                </el-select>
                <span style="margin-left: 20px;margin-right: 20px"></span>
                <el-select v-model="aboutModelId" placeholder="模型师">
                  <el-option
                    v-for="model in modelList"
                    :key="model.modelId"
                    :label="model.modelName"
                    :value="model.modelId"
                    style="text-align: center"
                  >
                  </el-option>
                </el-select>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="advancedFlag = false">取 消</el-button>
                  <el-button type="primary" @click="advancedFilter">查 询</el-button>
                </div>
              </el-dialog>
              <el-button type="primary" @click="manage()">管理</el-button>
            </el-col>
          </el-row>
        </div>
        <div id="classifyThree" v-if="flag===true">
          <el-row :gutter="24">
            <el-col :span="2" :offset="3">
              <el-button type="primary" @click="backMenu()" plain>返回</el-button>
            </el-col>
            <el-col :span="3">
              <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
                           style="margin-top: 5px;margin-right: 10px"
                           @change="handleCheckAllChange" id="checkAll"
              >全选
              </el-checkbox>
              <span style="font-size: 10px;color: #1787FB;">已选{{ this.num }}项</span>
            </el-col>
            <el-col :span="11" style="margin-left:400px">
              <el-button type="default" icon="el-icon-edit-outline" @click="editInfoClick">编辑信息</el-button>
              <el-dropdown style="text-align: center;margin-right: 10px;margin-left: 10px">
                <el-button type="default" class="iconfont icon-yunshangchuan">同步</el-button>
                <el-dropdown-menu slot="dropdown" style="height: 70px;">
                  <el-dropdown-item>
                    <el-button type="default">同步官网</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button type="default">同步作品集</el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-button type="default" class="iconfont icon-yunxiazai">下架</el-button>
              <el-button type="default" class="iconfont icon-daipingjia">邀请评价</el-button>
              <el-button type="default" class="iconfont icon-jingxuan" @click="updateSelection">设为精选</el-button>
              <el-button type="default" class="iconfont icon-filter">下载</el-button>
              <el-button type="primary" class="iconfont icon-filter" @click="delInfoByIds">删除</el-button>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-main>
    <el-footer>
      <div v-if="flagIsTrue===false" style="margin-top: 10px">
        <div id="bigImage" style="width: 750px;position: absolute">
          <div v-for="(order,index) in orderInfo" :key="index" class="orderInfoImage">
            <span style="font-size: 15px;font-weight: bolder">洛阳家具设计订单</span>
            <i class="el-icon-more" style="margin-left: 60px"></i><br/>
            <span style="font-size: 10px;font-family: 黑体;color: gray">三个任务<span
              style="color: lightgrey;margin-left: 5px"
            >|</span>
                 <el-avatar style="" :size="15"
                            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                 >
                </el-avatar>
                  <span style="margin-left: 5px">客户丁余尊</span>
                </span><br/>
            <div class="orderImageChildren" v-for="(imageInfo,item) in orderInfo" :key="item">
              <img :src="require(`@/assets/imgs/toilet1.jpg`)"
                   :alt="imageInfo" height="40px" width="40px"
              />
            </div>
          </div>
        </div>
        <div id="smallImage" style="width:600px;margin-left: 720px">
          <div class="rightImage" v-for="(rightImage,item) in rightImage" :key="item">
            <span style="font-size: 15px;font-weight: bolder">洛阳家具设计订单</span>
            <i class="el-icon-more" style="margin-left: 65px"></i><br/>
            <span style="font-size: 10px;font-family: 黑体;color: gray;">三个任务<span
              style="color: lightgrey;margin-left: 5px"
            >|</span>
                 <el-avatar style="" :size="15"
                            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                 >
                </el-avatar>
                  <span style="margin-left: 5px">客户丁余尊</span>
                </span><br/>
            <div class="orderImageChildren">
              <img :src="require(`@/assets/imgs/toilet1.jpg`)"
                   alt="装修设计图片" height="130px" width="200px"
              />
            </div>
          </div>
        </div>
      </div>
      <div v-if="infoEmpty===true">
        <h3>未查到任何数据</h3>
      </div>
      <div id="img" v-if="flagIsTrue===true && infoEmpty===false">
        <el-checkbox-group v-model="checkedCities">
          <div class="image" v-for="(city,index) in pageInfo.torderDetailList" :key="index"
               @click="clickDivChangeCheckBox(city,index)"
               :id="index" :class="{ImageStyle:city.isTrue}"
          >
            <div style="position: absolute;z-index:1000;margin-left: 190px;margin-top: 10px" v-if="flag===true">
              <el-checkbox :label="city" @change="clickDivChangeCheckBox(city,index)"><br/></el-checkbox>
            </div>
            <div v-if="city.jingpin===1"
                 style="position: absolute;margin: 10px 0 0 5px;z-index:1000;width: 20px;height: 20px;background-color:black;color: #e5c69a;border-radius: 6px;padding: 3px 3px 3px 4px;font-size: 5px;font-family: 黑体,serif"
            >
              <span>精</span>
            </div>
            <div v-if="city.makeType!==2 && city.image!=='http://127.0.0.1:8083/images/defaultImage.jpg'"
                 style="position: absolute;margin: 10px 0 0 5px;z-index:1000;width: 20px;height: 20px;background-color:#e0dede;border-radius: 6px;padding: 3px 3px 3px 4px;font-size: 5px;font-family: 黑体,serif;"
            >
              <span>主</span>
            </div>
            <img :src="city.image"
                 :alt="city" height="215px" width="215px"
                 @click="imageClick(city,index)"
            />
            <div style="font-family: Hiragino Sans GB,serif;font-size:6px;line-height:1.5;">
              <div>
                <div v-if="pageInfo.aboutOrderDetailStyles[index].commentNum>=5 &&
                pageInfo.aboutOrderDetailStyles[index].commentNum<=7"
                     style="position: absolute;width: 28px;font-weight:bold;height: 16px;background-color:#bfd2e5 ;padding-left: 1px;margin:-30px 0 0 180px;border-radius: 1px;color: #1787FB;opacity: 0.7"
                >
                  <span>中评</span>
                </div>
                <div v-if="pageInfo.aboutOrderDetailStyles[index].commentNum>=1 &&
                pageInfo.aboutOrderDetailStyles[index].commentNum<=4"
                     style="position: absolute;width: 28px;font-weight:bold;height: 16px;background-color: #fae1e1;padding-left: 1px;margin:-30px 0 0 180px;border-radius: 1px;color: #b20404;opacity: 0.7"
                >
                  <span>差评</span>
                </div>
                <div v-if="pageInfo.aboutOrderDetailStyles[index].commentNum>=8 &&
                pageInfo.aboutOrderDetailStyles[index].commentNum<=10"
                     style="position: absolute;width: 28px;font-weight:bold;height: 16px;background-color:#def6d7;padding-left: 1px;margin:-30px 0 0 180px;border-radius: 1px;color:rgba(4,166,4,0.87);opacity: 0.7"
                >
                  <span>好评</span>
                </div>
              </div>
              <div v-if="city.zpsh!=null && city.zpshName!=null"
                   style="position: absolute;width: 28px;font-weight:bold;height: 16px;background-color:lightgrey;padding-left: 1px;margin:-30px 0 0 150px;border-radius: 1px;opacity: 0.6"
              >
                <span>{{ city.zpshName }}</span>
              </div>
              <div v-if="city.makeType!=null && city.makeType===2"
                   style="position: absolute;width: 28px;font-weight:bold;height: 16px;background-color:lightgrey;padding-left: 1px;margin:-30px 0 0 120px;border-radius: 1px;opacity: 0.6;"
              >
                <span>全景</span>
              </div>
            </div>

            <div style="margin-top:10px;">
              <strong style="margin-top:80px;font-size:14px;color: #5b5e5e;font-family: 黑体">{{
                  city.gnflName
                }}{{ pageInfo.aboutOrderDetailStyles[index].fgflName }}{{ city.sceneName }}</strong>
              <div style="display: flex;align-items:center;margin-top: 5px">
                <span style="font-size: 10px;font-family: 方正姚体;color: gray">{{ city.makeName }}<span
                  style="color: lightgrey;margin-left: 5px"
                >|</span>
                  <span style="margin-left: 5px">{{ city.taskNo }}</span>
                </span>
              </div>
            </div>
          </div>
        </el-checkbox-group>
        <div style="margin-top: 20px" v-if="infoEmpty===false">
          <el-pagination background
                         layout="total, sizes, prev, pager, next, jumper"
                         :current-page.sync="page.currPageNo"
                         :page-size="10"
                         :total="page.totalCount"
                         @current-change="showByManyCondition"
          />
        </div>
      </div>
    </el-footer>
  </div>
</template>

<script>
import $ from 'jquery'
import axios from '@/utils/request'

let cityOptions = []
const orderImageInfo = [{ isTrue: false }, { isTrue: false }, { isTrue: false }, { isTrue: false }, { isTrue: false }, { isTrue: false }]
const rightImageList = [{ isTrue: false }, { isTrue: false }, { isTrue: false }, { isTrue: false }]
export default {
  name: 'MaterialIndex',
  data() {
    return {
      styleList: [], //风格类型
      firstClassify: [], //一级分类
      lastClassify: [],  //二级分类
      auditList: [], //审核级别
      auditNumber: null,    //审核级别id
      clientList: [{ id: 1, name: '好评' }, { id: 2, name: '中评' }, { id: 3, name: '差评' }],  //客户评价
      clientNumber: null,   //客户评价id
      makeTypeList: [{ id: 1, name: '静态' }, { id: 2, name: '全景' }], //制作形式
      makeTypeNumber: null,   //制作形式id
      classifyFirstId: null,   //一级场景分类id
      classifyLastId: null,    //二级场景分类id
      styleId: null, //风格id
      selectionId: null,  //是否精品
      pageInfo: {},  //后台TOrderMaterialResponse（自定义类返回参数）
      page: {},  //分页信息
      infoEmpty: false,  //查询信息为null时判断
      timeId: null,   //是否判断最近时间（1.是 2.否）
      linkMenuOneFlag: false, //最新链接样式动态控制变量
      linkMenuTwoFlag: false, //精选样式动态控制变量
      temp: 'left',
      flag: false,
      num: 0,
      isIndeterminate: true,
      checkAll: false,  //是否全选
      checkedCities: [],  //选中的单选按钮
      cities: cityOptions,
      orderInfo: orderImageInfo,
      rightImage: rightImageList,
      flagIsTrue: true,
      advancedFlag: false,  //高级筛选按钮
      formLabelWidth: '100px', //高级筛选弹窗宽度
      aboutCompanyId: null,  //所属公司下拉框绑的id
      aboutModelId: null,  //模型师下拉框绑的id
      companyList: [], //所属公司集合对象
      modelList: [],  //模型师集合对象
      firstAllShowFlag: true,  //一级场景控制全部样式
      lastAllShowFlag: true,  //二级场景控制全部样式
      styleAllShowFlag: true,  //风格特征控制全部样式
      editInfoFlag: false, //编辑信息
      checkInfoList: [], //选中集合
      checkInfo: {}

    }
  },
  methods: {
    async firstAllClick() {
      this.classifyFirstId = null
      this.firstAllShowFlag = true
      this.lastClassify = null
      this.showByManyCondition(1)
      this.firstClassify.forEach(item => {
        item.firstClassifyFlag = false
      })
    },
    async lastAllClick() {
      this.classifyLastId = null
      this.lastAllShowFlag = true
      this.showByManyCondition(1)
      this.lastClassify.forEach(item => {
        item.lastClassifyFlag = false
      })
    },
    async styleAllClick() {
      this.styleId = null
      this.styleAllShowFlag = true
      this.showByManyCondition(1)
      this.styleList.forEach(item => {
        item.styleFlag = false
      })

    },
    /*全选按钮点击事件*/
    handleCheckAllChange(val) {
      if (this.checkAll === true) {
        this.num = this.pageInfo.torderDetailList.length
        this.isIndeterminate = false
      } else {
        this.num = 0
        this.isIndeterminate = true
      }
      this.checkedCities = val ? this.pageInfo.torderDetailList : []
      cityOptions.forEach(city => {
        city.isTrue = this.checkAll === true
      })
    },
    /*单选按钮点击事件（除全选按钮）*/
    clickDivChangeCheckBox(item) {
      if (this.flag === true) {
        if (this.checkedCities.includes(item)) {
          item.isTrue = false
          this.checkedCities = this.checkedCities.filter(function(items) {
            return items !== item
          })
          this.num = this.checkedCities.length
        } else {
          item.isTrue = true
          this.checkedCities.push(item)
          this.num = this.checkedCities.length
        }
      }
      if (this.checkedCities.length === this.cities.length) {
        //样式为对勾
        this.checkAll = true
        this.isIndeterminate = false
      } else {
        this.checkAll = false
        this.isIndeterminate = true
      }
    },
    /*取反*/
    changeTemp() {
      this.flagIsTrue = !this.flagIsTrue
    },
    /*返回按钮点击事件*/
    backMenu() {
      this.flag = false
      this.temp = 'left'
      if (this.flag === false) {
        cityOptions.forEach(city => {
          city.isTrue = false
        })
      }
    },
    /*管理按钮点击事件*/
    manage() {
      this.flag = true
      this.flagIsTrue = true
      if (this.flag === true) {
        this.checkedCities.length = 0
        this.num = 0
      }
    },
    /*最新链接点击事件*/
    nearestTime() {
      this.linkMenuTwoFlag = false
      this.linkMenuOneFlag = true
      this.selectionId = null
      this.timeId = 1  //添加属性1确认查询最近时间任务
      this.showByManyCondition(1)
    },
    /*精选链接点击事件*/
    winnowClick() {
      this.linkMenuOneFlag = false
      this.linkMenuTwoFlag = true
      this.timeId = null
      this.selectionId = 1 //1.精选
      this.showByManyCondition(1)
    },
    /*展示图片点击事件*/
    imageClick(row, index) {
      //点击图片触发事件
      if (this.flagIsTrue === true && this.infoEmpty === false && this.flag === false) {
        this.$router.push({
          name: 'MaterialInfo',
          params: {
            'orderDetail': JSON.stringify(row), //任务对象
            'order': JSON.stringify(this.pageInfo.aboutOrderDetailStyles[index]) //订单对象
          }
        })
      }
    },
    // 制作形式下拉框change事件
    makeChange() {
      this.makeTypeId = this.makeTypeNumber
      this.showByManyCondition(1)
    },
    //审核级别下拉框
    auditChange() {
      this.orderQuality = this.auditNumber
      this.showByManyCondition(1)
    },
    // 客户评价下拉框
    clientChange() {
      this.scoreId = this.clientNumber
      this.showByManyCondition(1)
    },
    // 高级筛选
    advancedFilter() {
      this.modelId = this.aboutModelId
      this.companyId = this.aboutCompanyId
      this.showByManyCondition(1)
      this.advancedFlag = false
      this.aboutModelId = null
      this.aboutCompanyId = null
    },
    /*编辑信息*/
    editInfoClick() {
      this.editInfoFlag = true
      this.checkInfoList = this.checkedCities
      console.log('选中的值有：')
      console.log(this.checkedCities)
    },
    /*设为精选单击按钮事件*/
    updateSelection() {
      let ids = []
      this.checkedCities.forEach(item => ids.push(item.id))
      axios.get('/tOrderDetail/updateSelections', { params: { 'ids': ids + '' } }).then(res => {
        this.showByManyCondition(1)
        this.$message.success('设置' + res + '条数据成功')
      }).catch(err => {
        console.log(err)
      })
    },
    /*批量删除事件*/
    delInfoByIds() {
      let idArr = []
      this.checkedCities.forEach(check => idArr.push(check.id))
      axios.get('/tOrderDetail/delInfoByIds', { params: { 'ids': idArr + '' } }).then(res => {
        this.showByManyCondition(1)
        this.$message.success('删除' + res + '条数据成功')
      }).catch(err => {
        console.log(err)
      })

    },
    /*查询所有风格特征*/
    queryStyleInfo() {
      axios.get('/dictData/queryDictDataStyleInfo').then(res => {
        this.styleList = res
        this.styleList.forEach(item => {
          item.styleFlag = false
        })
      }).catch(err => {
        console.log(err)
      })
    },
    /*查询一级场景信息*/
    queryFirstClassify() {
      axios.get('/orderCategory/queryFirstClassify').then(res => {
        this.firstClassify = res
        this.firstClassify.forEach(item => {
          item.firstClassifyFlag = false
        })
      }).catch(err => {
        console.log(err)
      })
    },
    /*一级场景点击事件*/
    queryListClassify(first) {
      this.classifyLastId = null //清空二级id条件
      this.firstClassify.forEach(item => {
        item.firstClassifyFlag = false
      })
      //查询二级场景列表
      axios.get('/orderCategory/queryLastClassify', { params: { 'id': first.id } }).then(res => {
        this.lastClassify = res
        this.lastClassify.forEach(last => {
          last.lastClassifyFlag = false
        })
      }).catch(err => {
        console.log(err)
      })
      this.classifyFirstId = first.id //将一级场景id赋值
      this.showByManyCondition(1)  //调用方法进行查询
      this.firstAllShowFlag = false
      first.firstClassifyFlag = true
    },
    /*二级场景点击事件*/
    lastClassifyClick(item) {
      this.lastClassify.forEach(last => {
        last.lastClassifyFlag = false
      })
      this.lastAllShowFlag = false
      item.lastClassifyFlag = true
      this.$forceUpdate()  //强制刷新
      this.classifyLastId = item.id
      this.showByManyCondition(1)
    },
    /*风格特征点击事件*/
    styleInfoClick(style) {
      this.styleList.forEach(styleItem => {
        styleItem.styleFlag = false
      })
      this.styleAllShowFlag = false
      style.styleFlag = true
      this.styleId = style.value
      this.showByManyCondition(1)
    },
    /*根据多条件查询图片（订单及任务）*/
    showByManyCondition(number) {
      axios({
        headers: {
          'Content-Type': 'application/json;charset=utf-8'
        },
        method: 'get',
        url: '/tOrderDetail/queryInfoByManyCondition',
        params: {
          number: number,
          classifyFirstId: this.classifyFirstId,
          classifyLastId: this.classifyLastId,
          styleId: this.styleId,
          makeTypeId: this.makeTypeNumber,
          orderQuality: this.auditNumber,
          selectionId: this.selectionId,
          scoreId: this.clientNumber,
          AboutTimeId: this.timeId,
          modelId: this.aboutModelId,
          companyId: this.aboutCompanyId
        }
      }).then(res => {
        if (res.torderDetailList !== null && res.aboutPageInfo !== null) {
          this.infoEmpty = false
          this.pageInfo = res
          cityOptions = res.torderDetailList
          this.page = res.aboutPageInfo
          this.pageInfo.torderDetailList.forEach(item => {
            item.isTrue = false
          })
          /*        console.log('查询返回的值为')
                  console.log(res)*/
        } else {
          this.infoEmpty = true  //查询数据为空时展示
        }

      }).catch(err => {
        console.log(err)
      })
    },
    // 查询审核级别
    queryAuditInfo() {
      axios.get('/tOrderDetail/queryAllAboutOrderInfo').then(res => {
        this.auditList = res
      }).catch(err => {
        console.log(err)
      })
    },
    // 查询模型师
    queryModelInfo() {
      axios.get('/tOrderDetail/queryAllAboutModel').then(res => {
        this.modelList = res
      }).catch(err => {
        console.log(err)
      })
    },
    // 查询所属公司
    queryCompanyInfo() {
      axios.get('/tOrderDetail/queryAllAboutCompany').then(res => {
        this.companyList = res
      }).catch(err => {
        console.log(err)
      })
    }
  },
  mounted() {
    $('#firstAll,#lastAll,#styleAll').css({})
    this.queryStyleInfo() //查询风格分类
    this.queryFirstClassify()//查询一级分类
    this.queryAuditInfo() //查询审核级别
    this.queryCompanyInfo()//查询所属公司
    this.queryModelInfo() //查询模型师
    this.showByManyCondition(1) //多条件查询图片
  }
}
</script>

<style scoped>

.ImageStyle {
  border: 2px #468dd7 solid;
}

::v-deep .showLink {
  height: 25px !important;
  padding: 1px 5px 1px 5px !important;
  background-color: #e0edfa !important;
  color: #1787FB !important;
  font-weight: bolder !important;
  border-radius: 2px !important;
}

.linkMenu {
  color: #1787FB !important;
  font-weight: bolder !important;
}

.allShowLink {
  height: 25px;
  padding: 1px 5px 1px 5px;
  background-color: #e0edfa;
  color: #1787FB;
  font-weight: bolder;
  border-radius: 2px;
}

* {
  margin: 0;
  padding: 0;
}

.el-button {
  padding: 5px;
}

::-webkit-scrollbar {
  width: 0 !important;
}

::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}

#classifyOne {
  line-height: 40px;
}

#classifyOne ul li .el-link:hover {
  color: #1787FB;
  font-weight: bolder;
}

#classifyOne ul li {
  display: inline-block;
}

#classifyOne ul li:not(:first-child) {
  margin-left: 20px;
}

.orderInfoImage {
  padding: 15px;
  display: inline-block;
  width: 230px;
  height: 200px;
  border-radius: 10px;
  background-color: #FFFFFF;
  border: 1px lightgrey solid;
  opacity: 0.9;
  margin: 0 0 10px 8px;
}

.rightImage {
  display: inline-block;
  padding: 10px;
  margin: 0 0 10px 8px;
  background-color: #FFFFFF;
  border: 1px lightgrey solid;
  width: 230px;
  height: 200px;
  border-radius: 10px;
  text-align: left;
  opacity: 0.9;
}

.orderImageChildren {
  padding: 4px;
  display: inline-block;
}

.orderImageChildren img {
  border-radius: 5px;
}

.image {
  display: inline-block;
  height: 285px;
  margin: 0 0 10px 12px;
  padding: 0 6px;
  cursor: pointer;
  border-radius: 10px;
}

.image img {
  border-radius: 17px;
}

::v-deep .el-checkbox__inner {
  border: 1px solid snow;
  border-radius: 15px;
  background: transparent;
}

#img {
  text-align: initial !important;
  margin-top: 15px;
}

.el-checkbox-group {
  font-size: unset;
}


::v-deep .el-radio-button__inner {
  width: 20px;
  height: 25px;
  line-height: 8px;
  outline: none;
  box-shadow: none;
}

::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background-color: grey;
  border-color: snow;
  -webkit-box-shadow: none;
  box-shadow: none;
}

</style>
